<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="float: right">
        <a-button type="primary" @click="onEdit" icon="plus">新增</a-button>
        <a-button type="primary" @click="onSetting">打印设置</a-button>
      </div>
      <a-divider />
      <a-table ref="table" size="default" row-key="id" :columns="columns" :data-source="loadData" :pagination="false">
        <a-space slot="action" slot-scope="text">
          {{ text }}
        </a-space>
        <span slot="action" slot-scope="text, item">
          <a-button type="link" @click="onEdit(item.id)" size="small">编辑</a-button>
          <a-divider type="vertical" />
          <a-button type="link" @click="onConfirmStatus('is_delete', item.id)" size="small">删除</a-button>
        </span>
      </a-table>
    </a-card>
    <a-modal
      title="面单打印编辑"
      @ok="onSave"
      okText="保存"
      @cancel="onClose"
      :destroyOnClose="true"
      :visible="visible"
    >
      <a-row v-if="loading" style="text-align: center"><a-spin /></a-row>
      <template v-else>
        <a-form action="" method="post" :form="form">
          <a-form-item :hidden="true">
            <a-input v-decorator="['id']" type="number" :step="1" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="打印机名称" hasFeedback>
            <a-input
              placeholder="请填写打印机名称"
              v-decorator="['name', { rules: [{ required: true, message: '填写打印机名称' }] }]"
              type="text"
              :step="1"
            />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="选择打印机类型"
            help="目前支持针式云打印"
            hasFeedback
          >
            <a-select placeholder="选择打印机类型" v-decorator="['cloud_type']">
              <a-select-option value="kdt2" key="kdt2"> 针式云（编号kdt2） </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="打印机编号"
            help="购买打印机后说明书查询"
            hasFeedback
          >
            <a-input placeholder="请填写打印机名称" v-decorator="['cloud_setting[name]']" type="text" :step="1" />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="打印机APPID"
            help="映美云开放平台获取"
            hasFeedback
          >
            <a-input placeholder="请填写打印机APPID" v-decorator="['cloud_setting[app_id]']" type="text" :step="1" />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="打印机APPKEY"
            help="映美云开放平台获取"
            hasFeedback
          >
            <a-input placeholder="请填写打印机APPKEY" v-decorator="['cloud_setting[app_key]']" type="text" :step="1" />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="订单头部标题"
            help="订单头部标题"
            hasFeedback
          >
            <a-input
              placeholder="请填写订单头部标题"
              v-decorator="['cloud_setting[order_title]']"
              type="text"
              :step="1"
            />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="订单底部联系电话"
            help="订单底部联系电话"
            hasFeedback
          >
            <a-input
              placeholder="请填写订单底部联系电话"
              v-decorator="['cloud_setting[order_mobile]']"
              type="text"
              :step="1"
            />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="订单底部地址"
            help="订单底部地址"
            hasFeedback
          >
            <a-input
              placeholder="请填写订单底部地址"
              v-decorator="['cloud_setting[order_address]']"
              type="text"
              :step="1"
            />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="订单底部说明"
            help="订单底部说明"
            hasFeedback
          >
            <a-input
              placeholder="请填写订单底部说明"
              v-decorator="['cloud_setting[order_desc]']"
              type="text"
              :step="1"
            />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="打印机联数"
            help="同一订单，打印的次数"
            hasFeedback
          >
            <a-input placeholder="请填写打印机联数" v-decorator="['cloud_setting[time]']" type="number" :step="1" />
          </a-form-item>
        </a-form>
      </template>
    </a-modal>
    <a-modal destroyOnClose v-model="showSetting" title="打印设置" @ok="handleOk">
      <a-form action="" method="post" :form="formSetting">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择打印机">
          <a-select
            placeholder="选择选择打印机"
            v-decorator="['cloud_id', { rules: [{ required: true, message: '请选择打印机名称' }] }]"
          >
            <a-select-option v-for="item of loadData" :value="item.id" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="订单打印方式" >
          <a-checkbox-group v-decorator="['type[order]']">
            <a-checkbox value="1">下单打印</a-checkbox>
          </a-checkbox-group>
          <a-checkbox-group v-decorator="['type[pay]']">
            <a-checkbox value="1">付款打印</a-checkbox>
          </a-checkbox-group>
          <a-checkbox-group v-decorator="['type[confirm]']">
            <a-checkbox value="1">确认收货打印</a-checkbox>
          </a-checkbox-group>
        </a-form-item> -->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="下单打印">
          <a-radio-group name="radioGroup" v-decorator="['type[order]']">
            <a-radio :value="1"> 开 </a-radio>
            <a-radio :value="0"> 关 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="付款打印">
          <a-radio-group name="radioGroup" v-decorator="['type[pay]']">
            <a-radio :value="1"> 开 </a-radio>
            <a-radio :value="0"> 关 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="确认收货打印">
          <a-radio-group name="radioGroup" v-decorator="['type[confirm]']">
            <a-radio :value="1"> 开 </a-radio>
            <a-radio :value="0"> 关 </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { List, Edit, Save, Del, SaveSetting } from '@/api/setting/cloud'
import { STable } from '@/components'
import pick from 'lodash.pick'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '打印机品牌',
    dataIndex: 'cloud_type',
    scopedSlots: { customRender: 'cloud_type' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'Cloud',
  components: {
    STable,
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      formSetting: this.$form.createForm(this),
      columns: columns,
      loading: false,
      visible: false,
      setting: {},
      cloud: { cloud_type: 'kdt2' },
      loadData: [],
      showSetting: false,
    }
  },
  created() {
    this.getList()
  },
  watch: {
    cloud(value) {
      this.updateData()
    },
  },
  methods: {
    getList(parameter) {
      this.loadData = null
      return List(parameter).then((res) => {
        this.loadData = res.data.list
        if (res.data.setting) {
          res.data.setting.type = JSON.parse(res.data.setting.type)
        }
        this.setting = res.data.setting
      })
    },
    onEdit(id) {
      this.visible = true
      this.loading = true
      this.selectSize = []
      Edit({ id: id }).then((res) => {
        if (res.data.model) {
          res.data.model.cloud_setting = JSON.parse(res.data.model.cloud_setting)
        }
        this.cloud = res.data.model ? res.data.model : { cloud_type: 'kdt2' }
        this.loading = false
      })
    },
    /**
     * 渲染form表单
     */
    updateData() {
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.cloud, ['id', 'cloud_type', 'name']))
        if (this.cloud.cloud_setting) {
          console.log(this.cloud)
          this.form.setFieldsValue({
            'cloud_setting[time]': this.cloud.cloud_setting.time,
            'cloud_setting[name]': this.cloud.cloud_setting.name,
            'cloud_setting[app_id]': this.cloud.cloud_setting.app_id,
            'cloud_setting[app_key]': this.cloud.cloud_setting.app_key,
            'cloud_setting[order_title]': this.cloud.cloud_setting.order_title,
            'cloud_setting[order_mobile]': this.cloud.cloud_setting.order_mobile,
            'cloud_setting[order_address]': this.cloud.cloud_setting.order_address,
            'cloud_setting[order_desc]': this.cloud.cloud_setting.order_desc,
          })
        }
      })
    },
    onSave(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$message.loading({ content: '提交中', key: 'updatable' })
          Save(values).then((res) => {
            if (res.code === 0) {
              this.$message.success({ content: res.msg, key: 'updatable' })
              this.$nextTick(() => {
                this.visible = false
                this.getList()
              })
            } else {
              this.$message.error({ content: res.msg, key: 'updatable' })
            }
          })
        } else {
          console.log(err)
          for (const key in err) {
            this.$message.error(err[key].errors[0].message)
          }
        }
      })
    },
    onSaveSetting(e) {
      e.preventDefault()
      this.formSetting.validateFields((err, values) => {
        if (!err) {
          this.$message.loading({ content: '提交中', key: 'updatable' })
          SaveSetting(values).then((res) => {
            if (res.code === 0) {
              this.$message.success({ content: res.msg, key: 'updatable' })
              this.$nextTick(() => {
                this.visible = false
                this.getList()
              })
            } else {
              this.$message.error({ content: res.msg, key: 'updatable' })
            }
          })
        } else {
          for (const key in err) {
            this.$message.error(err[key].errors[0].message)
          }
          return false
        }
      })
    },
    onClose() {
      this.visible = false
      this.loading = false
      this.cloud = {}
    },
    onSetting() {
      this.showSetting = true
      this.updateSetting()
    },
    updateSetting() {
      this.$nextTick(() => {
        this.formSetting.setFieldsValue({
          'type[order]': this.setting && this.setting.type.order === 1 ? 1 : 0,
          'type[pay]': this.setting && this.setting.type.pay === 1 ? 1 : 0,
          'type[confirm]': this.setting && this.setting.type.confirm === 1 ? 1 : 0,
          cloud_id: this.setting ? this.setting.cloud_id : 0,
        })
      })
    },
    handleOk(e) {
      this.onSaveSetting(e)
      this.showSetting = false
    },
    onConfirmStatus(type, id) {
      var that = this
      this.$confirm({
        content: '是否确认删除',
        onOk() {
          that.updateStatus({ id: id })
        },
      })
    },
    updateStatus(q) {
      Del(q).then((res) => {
        if (res.code === 0) {
          this.getList()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.required::before {
  content: '*';
  color: red;
}
</style>
